<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>摄影页面展示</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            line-height: 24px;
            font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
        }

        blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        body>div{
            display: block;
        }
        .main-left {
            width: 940px;
            background: #fff;
            margin-bottom: 60px;
            padding: 30px;
            margin: 0;

        }

        /*主页左半部分的样式*/
        .main-left{
            font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
        }
        .mainsclearfix>a{
            margin-bottom: 20px;
        }
        .main-left-llfl>img{
            margin: 0px;
            padding: 0px;
            float: left;
        }
        .main-left-lrfl{
            width: 540px;
            height: 197px;
            float: left;
            margin-left: 25px;
        }
        .main-left-lrfl>h3{
            font-size: 20px;
            color: #333333;
            margin-top: 15px;
            margin-bottom: 25px;
        }
        .main-left-llfl>p{
            line-height: 22px;
            font-size: 15px;
            color: #707070;
            /* margin-bottom: 5px; */
            height: 66px;
            margin-bottom: 20px;
            font-weight: 500;
            overflow: hidden;
            padding: 0px;
        }
        .zuoclearfix{
            margin: 10px;
        }

        .zuoclearfix>.fl{
            float: left;
            position: relative;
            right: 8px;
            bottom: 2px;

        }
        .zuoclearfix>.fr{
            float: right;

        }

        /*主页右半部分*/
        .main-right{
            padding:20px 25px;
        }
        .main-right>p{
            font-size: 18px;
            color: #333333;
            margin-bottom: 10px;
            border-bottom: 1px solid
        }
        .gengduo>ul>li{
            padding: 20px 0 10px 0;
        }
        .gengduo>a{
            width: 148px;
            height: 28px;
            padding: 0px;
            border: 1px;

        }
        .gengduo>a>img{
            width: 28px;
            height: 18px;
            position: relative;

        }

    </style>
</head>
<body>
<div class="container">
    <!--主要内容左半部分开始-->
    <div class="containerclearfix" style="border: blue">

        <div class="main-left">
            <div class="mainsclearfix" v-for="a in arr">
                <a href="#">
                    <div class="main-left-llfl">
                        <img :src="a.url"/>
                    </div>
                    <div class="main-left-lrfl">
                        <h3>{{a.title}}</h3>
                        <p>{{a.content}}</p>
                        <div class="zuoclearfix">
                            <div class="fl">作者：{{a.author}}</div>
                            <div class="fr">{{a.created}}</div>
                        </div>
                    </div>
                </a>
            </div>
            <hr>

            <ul class="pagination" >
                <li><a href="#" @click="fnleft()">&laquo;</a ></li>
                <li><a href="#" @click="fn1()">1</a></li>
                <li><a href="#" @click="fn2()">2</a></li>
                <li><a href="#" @click="fn3()">3</a></li>
                <li><a href="#" @click="fn4()">4</a></li>
                <li><a href="#" @click="fn5()">5</a></li>
                <li><a href="#" @click="fnright()">&raquo;</a></li>
            </ul>
        </div>
        <!--主要部分左半部分结束-->

        <!--主要部分右半部分开始-->


        <!--主要部分右半部分结束-->
    </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--引入处理时间格式的js文件-->
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>

<script>
    let vm = new Vue({
        el:".containerclearfix",
        data:{
            index:[1,2,3,4,5],
            arr:[],
        },
        created:function () {
             let index = 1;
            axios.get("/Exhi/SelectByIndex?index="+index).then(function (response) {
                vm.arr=response.data;
            })
        },
        methods:{
            fnleft:function () {
                let index=location.search.split("=")[1]-1;
                if (index>0){
                    axios.get("/Exhi/SelectByIndex?index="+index).then(function (response) {
                        vm.arr=response.data;
                    })
                }else {
                    alert("现在已经为首页!");
                }

            },
            fn1:function () {
                let index =1;
                axios.get("/Exhi/SelectByIndex?index=1").then(function (response) {
                    vm.arr=response.data;
                })
            },
            fn2:function () {
                let index =2;
                axios.get("/Exhi/SelectByIndex?index=2").then(function (response) {
                    vm.arr=response.data;
                })
            },
            fn3:function () {
                axios.get("/Exhi/SelectByIndex?index=3").then(function (response) {
                    vm.arr=response.data;
                })
            },
            fn4:function () {
                axios.get("/Exhi/SelectByIndex?index=4").then(function (response) {
                    vm.arr=response.data;
                })
            },
            fn5:function () {
                axios.get("/Exhi/SelectByIndex?index=5").then(function (response) {
                    vm.arr=response.data;
                })
            },
            fnright:function () {
                let index=location.search.split("=")[1]+1;
                if (index<=5){
                    axios.get("/Exhi/SelectByIndex?index="+index).then(function (response) {
                        vm.arr=response.data;
                    })
                }else {
                    alert("已经为最后一页!");
                }

            },
        }

    })

</script>
</body>
</html>